<script setup lang="ts">
import { ref, watch, onBeforeMount } from 'vue';
import {
  reqGetCategory1,
  reqGetCategory2,
  reqGetCategory3
} from '@/api/product/category.ts';
import type {
  Category1,
  Category2,
  Category3,
  Category
} from '@/api/product/type.ts';
import { quasarFormStyle } from '@/setting.ts';

defineProps<{
  readonly: boolean;
}>();
// 一级分类
const category1Id = ref<number>();
const category1List = ref<Category1[]>();
const getCategory1List = async () => {
  const res = await reqGetCategory1();
  if (res.code === 200) category1List.value = res.data;
};
// 二级分类
const category2Id = ref<number>();
const category2List = ref<Category2[]>();
const getCategory2List = async () => {
  const res = await reqGetCategory2(category1Id.value!);
  if (res.code === 200) category2List.value = res.data;
};
watch(category1Id, () => {
  category2Id.value = undefined;
  category3Id.value = undefined;
  category2List.value = undefined;
  category3List.value = undefined;
  getCategory2List();
});
// 三级分类
const category3Id = ref<number>();
const category3List = ref<Category3[]>();
const getCategory3List = async () => {
  const res = await reqGetCategory3(category2Id.value!);
  if (res.code === 200) category3List.value = res.data;
};
watch(category2Id, val => {
  if (!val) return;
  category3Id.value = undefined;
  category3List.value = undefined;
  getCategory3List();
});
//
const emit = defineEmits<{
  getCategory: [params?: Category];
}>();
watch(category3Id, () => {
  if (!category3Id.value) {
    emit('getCategory');
    return;
  }
  const params: Category = {
    category1Id: category1Id.value!,
    category2Id: category2Id.value!,
    category3Id: category3Id.value!
  };
  emit('getCategory', params);
});
onBeforeMount(() => {
  getCategory1List();
});
</script>

<template>
  <!-- 分类列表 -->
  <q-card>
    <q-card-section horizontal class="flex justify-around items-center">
      <q-card-section>
        <q-select
          behavior="menu"
          label="一级分类"
          v-model="category1Id"
          :options="category1List"
          option-value="id"
          emit-value
          option-label="name"
          map-options
          style="min-width: 160px"
          options-dense
          :readonly="readonly"
          v-bind="quasarFormStyle"
        />
      </q-card-section>
      <q-card-section>
        <q-select
          behavior="menu"
          label="二级分类"
          v-model="category2Id"
          :options="category2List"
          option-value="id"
          emit-value
          option-label="name"
          map-options
          style="min-width: 160px"
          options-dense
          :disable="!category1Id"
          :readonly="readonly"
          v-bind="quasarFormStyle"
        />
      </q-card-section>
      <q-card-section>
        <q-select
          behavior="menu"
          label="三级分类"
          v-model="category3Id"
          :options="category3List"
          option-value="id"
          emit-value
          option-label="name"
          map-options
          style="min-width: 160px"
          options-dense
          :disable="!category2Id"
          :readonly="readonly"
          v-bind="quasarFormStyle"
        />
      </q-card-section>
    </q-card-section>
  </q-card>
</template>

<style scoped>
/* code... */
</style>
